<template>
  <div class="container">
    <el-card>
      <!-- 顶部提示 -->

      <el-row>
        <el-col :span="24" class="top_title"> 试题录入</el-col>
      </el-row>
      <hr class="hr-line" />
      <!-- 顶部提示 end -->
      <!-- 顶部搜索表单 -->
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <!-- 学科 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="学科" prop="subjectID">
              <el-select style="width: 400px" v-model="form.subjectID"
                placeholder="请选择学科" @focus="getSubjectList">
                <el-option
                v-for="subject in subjects"
                  :key="subject.value"
                  :label="subject.label"
                  :value="subject.value"
                  ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 目录 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="目录" prop="catalogID">
              <el-select style="width: 400px" v-model="form.catalogID"
                placeholder="请选择目录" @focus="getDirectoryList">
                <el-option v-for="directory in directories" :key="directory.id"
                  :label="directory.directoryName" :value="directory.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 企业 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="企业" prop="enterpriseID">
              <el-select style="width: 400px" v-model="form.enterpriseID"
                placeholder="请选择企业" @focus="getCompanyList">
                <el-option v-for="company in companies" :key="company.id"
                  :label="company.company" :value="company.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 城市 -->
        <el-row>
          <el-col :span="8">
            <div style="display: flex;justify-content: start">
              <el-form-item label="城市" prop="province">
                <el-select style="width: 200px" v-model="form.province"
                  placeholder="请选择市" @focus="getProvinceList">
                  <el-option v-for="(province,index) in provinces" :key="index"
                    :label="province" :value="province"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="city" label-width="0">
                <el-select style="width: 200px" v-model="form.city"
                  placeholder="请选择区" @focus="getCityList">
                  <el-option v-for="(city,index) in cities" :key="index"
                    :label="city" :value="city"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <!-- 方向 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="方向" prop="direction">
              <el-select style="width: 400px" v-model="form.direction"
                placeholder="请选择方向">
                <el-option v-for="(direction,index) in directions" :key="index"
                  :label="direction" :value="direction"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 题型 -->
        <el-row>
          <el-col>
            <el-form-item label="题型" prop="questionType">
              <el-radio-group v-model="form.questionType">
                <el-radio v-for="type in questionType" :key="type.value"
                  :label="type.label" :value="type.label"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 难度 -->
        <el-row>
          <el-col>
            <el-form-item label="难度" prop="difficulty">
              <el-radio-group v-model="form.difficulty">
                <el-radio v-for="type in difficulty" :key="type.value"
                  :label="type.label" :value="type.label"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 题干 -->
        <el-row>
          <el-col>
            <el-form-item class="area" label="题干" prop="question">
              <quillEditor style="height: 140px" v-model="form.question"
                :options="editorOption"></quillEditor>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 选项 -->
        <el-radio-group v-model="selected"
          style="display: flex;flex-direction: column"
          v-if="form.questionType==='单选'">

          <el-radio style="padding: 20px 0;width: 400px"
            v-for="(option,index) in form.options" :key="index" :label="index">
            {{ option.code }}:
            <el-input v-model="option.title"></el-input>
          </el-radio>
        </el-radio-group>
        <template v-if="form.questionType==='多选'">

          <el-checkbox v-model="option.isRight"
            style="padding: 20px 0;width: 400px"
            v-for="(option,index) in form.options" :key="index">
            {{ option.code }}:
            <el-input v-model="option.title"></el-input>
          </el-checkbox>
        </template>
        <div>

          <el-button :disabled="form.questionType!=='多选'" @click="addOption"
            type="danger">添加选项与答案</el-button>
        </div>

        <!-- 解析视频 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="解析视频">
              <el-input style="width: 400px;" v-model="form.videoURL">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 答案解析 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="答案解析" class="area" prop="answer">
              <quillEditor style="height: 140px" v-model="form.answer"
                :options="editorOption"></quillEditor>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 题目备注： -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="题目备注">
              <el-input type="textarea" :rows="5" v-model="form.desc">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 题目标签： -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="题目标签" prop="tags">
              <el-select style="width: 400px;" v-model="form.tags"
                placeholder="请选择标签" @focus="getTagList">
                <el-option v-for="tag in tags" :key="tag.id"
                  :label="tag.tagName" :value="tag.tagName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>

      <!-- 顶部搜索表单 end -->

      <!-- tab标签页  -->
    </el-card>
  </div>
</template>

<script>
// 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// 获取学科简单列表接口
import { simple as subjectList } from '@/api/hmmm/subjects'
// 获取企业接口
import { list as companyList } from '@/api/hmmm/companys'
import { list as directoryList } from '@/api/hmmm/directorys'
import { add as addQuestion, detail, update } from '@/api/hmmm/questions'
// 获取题目标签接口
import { list as tagList } from '@/api/hmmm/tags'
// 获取城市和地区接口
import { citys, provinces } from '@/api/hmmm/citys'
import { difficulty, direction, questionType } from '@/api/hmmm/constants'

export default {
  name: 'QuestionNew',
  components: {
    quillEditor
  },
  data () {
    return {
      QuestionId: '', // 传来的id
      isRoute: false, // 是否是跳转过来的
      selected: '', // 选项
      subjects: [], // 学科
      companies: [], // 企业
      tags: [], // 题目标签
      directions: direction, // 方向
      questionType, // 单选
      difficulty, // 难度
      directories: [], // 目录
      provinces: [], // 城市
      cities: [], // 地区
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '单选',
        difficulty: '简单',
        question: '',
        videoURL: '',
        answer: '',
        remarks: '',
        tags: '',

        options: [
          { isRight: false, code: 'A', title: '' },
          { isRight: false, code: 'B', title: '' },
          { isRight: false, code: 'C', title: '' },
          { isRight: false, code: 'D', title: '' }
        ]

      },
      editorOption: {
        // 占位配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }]
          ]
        }

      },
      rules: {
        subjectID: [{ required: true, message: '学科不能为空', trigger: 'change' }],
        catalogID: [{ required: true, message: '目录不能为空', trigger: 'change' }],
        tags: [{ required: true, message: '标签不能为空', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '公司不能为空', trigger: 'change' }],
        province: [{ required: true, message: '城市不能为空', trigger: 'change' }],
        city: [{ required: true, message: '地区不能为空', trigger: 'change' }],
        direction: [{ required: true, message: '方向不能为空', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入解析', trigger: 'blur' }]
      }

    }
  },
  watch: {
    'form.questionType': {
      deep: true,
      handler () {
        this.form.options = [
          { isRight: false, code: 'A', title: '' },
          { isRight: false, code: 'B', title: '' },
          { isRight: false, code: 'C', title: '' },
          { isRight: false, code: 'D', title: '' }
        ]
      }
    },
    // 监听选项的数据
    selected (newVal) {
      // eslint-disable-next-line no-return-assign
      this.form.options.forEach(item => item.isRight = false)
      this.form.options[newVal].isRight = true
    },
    '$route.query': {
      handler (nval) {
        // console.log(nval)
        this.QuestionId = nval.id
        if (nval.id) {
          this.isRoute = true
          detail(nval).then(async ({ data }) => {
            // console.log(data)
            this.form = data
            // 此时不能清空 目录
            const res = await subjectList()
            this.subjects = res.data
            this.getDirectoryList()
            this.getCompanyList()
          })
        } else {
          this.isRoute = false
          this.form = {
            subjectID: '',
            catalogID: '',
            enterpriseID: '',
            province: '',
            city: '',
            direction: '',
            questionType: '单选',
            difficulty: '简单',
            question: '',
            videoURL: '',
            answer: '',
            remarks: '',
            tags: '',

            options: [
              { isRight: false, code: 'A', title: '' },
              { isRight: false, code: 'B', title: '' },
              { isRight: false, code: 'C', title: '' },
              { isRight: false, code: 'D', title: '' }
            ]

          }
          this.$nextTick(() => {
            this.$refs.form.resetFields()
          })
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    // 添加选项与答案按钮
    addOption () {
      this.form.options.push({ isRight: false, code: String.fromCharCode(this.form.options.length + 65), title: '' })
    },
    // 确认提交按钮
    async onSubmit () {
      await this.$refs.form.validate()
      if (this.isRoute) {
        // 此时是点击跳转过来 修改
        await update({ ...this.form })
        this.$message.success('修改成功~')
        this.$router.back()
      } else {
        // 此时是点击目录做新增
        try {
          await addQuestion({ ...this.form })
          this.$message.success('添加成功~')
          this.$refs.form.resetFields()
          this.form.options = [
            { isRight: false, code: 'A', title: '' },
            { isRight: false, code: 'B', title: '' },
            { isRight: false, code: 'C', title: '' },
            { isRight: false, code: 'D', title: '' }
          ]
          this.form.questionType = '单选'
          this.$router.push('/questions/list')
        } catch (e) {
          console.log(e)
        }
      }
    },
    // 选择学科的方法
    async getSubjectList () {
      const res = await subjectList()
      this.subjects = res.data
      // console.log(res)
      this.directories = []
      this.form.catalogID = ''
      this.form.tags = ''
    },
    // 选择企业方法
    async getCompanyList () {
      const res = await companyList()

      this.companies = res.data.items
    },
    // 选择目录方法
    async getDirectoryList () {
      const { data: { items } } = await directoryList({ pagesize: 20 })
      this.directories = items.filter(item => item.subjectID === this.form.subjectID)
    },
    // 选择题目标签方法
    async getTagList () {
      const { data: { items } } = await tagList()
      this.tags = items.filter(item => item.subjectID === this.form.subjectID)
    },
    // 选择城市方法
    getProvinceList () {
      this.provinces = provinces()
    },
    // 选择地区方法
    getCityList () {
      this.cities = citys(this.form.province)
    }
  },
  created () {
  }
}
</script>

<style lang="scss">
.area .el-form-item__content {
  height: 200px;
}
</style>
